<div *ngIf="!isEditStatus" class="row">
  <div class="col-sm-12">
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">设计概述</a></li>
            <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">设计要求</a></li>
            <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">任务安排</a></li>
            <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">参考文献</a></li>
            <li class=""><button class="btn btn-warning" (click)="showTaskDemo()">查看例子</button></li>
            <li class="pull-right" (click)="goEdit()"><button class="btn btn-primary">编辑</button></li>
        </ul>
        <!-- tab content start -->
        <div class="tab-content col-sm-12">
            <div class="tab-pane active" id="tab_1">
                <h3>一、题目来源及原始数据资料</h3>
                <p>{{Task.DesignSummary}}</p>
            </div>
            <div class="tab-pane" id="tab_2">
                <h3>二、毕业设计要求</h3>
                <h4>1、设计内容:</h4>
                <p>{{Task.DesignContent}}</p>

                <h4>2、研究内容:</h4>
                <p>{{Task.ResearchContent}}</p>

                <h4>3、实现功能:</h4>
                <p>移动端:{{Task.FunctionForPC}}</p>
                <p>WEB端:{{Task.FunctionForMobile}}</p>

                <h4>4、后期任务:</h4>
                <p>{{Task.LaterTask}}</p>

                <h4>5、最终提交:</h4>
                <p>{{Task.LastSumbit}}</p>
            </div>
            <div class="tab-pane" id="tab_3">
                <h3>三、进度安排、应完成的工作量</h3>
                <h4>1、系统需求分析：</h4>
                <p>{{Task.SystemAnalysis}}</p>

                <h4>2、系统设计：</h4>
                <p>{{Task.SystemDesign}}</p>

                <h4>3、技术准备：</h4>
                <p>{{Task.SkillReady}}</p>

                <h4>4、软件设计：</h4>
                <p>{{Task.SoftwareDesign}}</p>

                <h4>5、软件开发编程：</h4>
                <p>{{Task.SoftwareDevelop}}</p>

                <h4>6、软件程序测试：</h4>
                <p>{{Task.SoftwareTest}}</p>

                <h4>7、毕业论文撰写：</h4>
                <p>{{Task.TitleWrite}}</p>

                <h4>8、毕业论文（设计）成品初稿提交：</h4>
                <p>{{Task.TitleFristSumbit}}</p>

                <h4>9、毕业论文（设计）修改：</h4>
                <p>{{Task.TitleEdit}}</p>

                <h4>10、毕业论文（设计）答辩：</h4>
                <p>{{Task.TitleAnswer}}</p>

                <h4>11、毕业论文（设计）成品终稿提交：</h4>
                <p>{{Task.TitleLastSumbit}}</p>
            </div>
            <div class="tab-pane" id="tab_4">
                <h3>四、主要参考文献</h3>
                <p>{{Task.Reference}}</p>
            </div>
        </div>
        <!-- tab content end -->
    </div>
  </div>
</div>

<!-- 编辑状态 -->
<div *ngIf="isEditStatus" class="row">
    <div class="col-sm-12">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">设计概述</a></li>
                <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">设计要求</a></li>
                <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">任务安排</a></li>
                <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false">参考文献</a></li>
                <li class=""><button class="btn btn-warning" (click)="showTaskDemo()">查看例子</button></li>
                <li class="pull-right" (click)="editTask()"><button class="btn btn-primary">确认</button></li>
                <li class="pull-right" (click)="goBack()"><button class="btn btn-danger">取消</button></li>
            </ul>
            <!-- tab content start -->
            <div class="tab-content col-sm-12">
                <div class="tab-pane active" id="tab_1">
                    <h3>一、题目来源及原始数据资料</h3>
                    <textarea id="EdesignSummary" class="col-sm-12" rows="15" placeholder="请输入题目来源及原始数据资料"
                        [(ngModel)]="TaskEditModel.DesignSummary" name="EdesignSummary"></textarea>
                </div>
                <div class="tab-pane" id="tab_2">
                    <h3>二、毕业设计要求</h3>
                    <h4>1、设计内容:</h4>
                    <textarea class="col-sm-12" rows="6" placeholder="请输入设计内容"
                        [(ngModel)]="TaskEditModel.DesignContent" name="EdesignContent"></textarea>
                    <h4>2、研究内容:</h4>
                    <textarea class="col-sm-12" rows="6" placeholder="请输入研究内容"
                        [(ngModel)]="TaskEditModel.ResearchContent" name="EresearchContent"></textarea>
                    <h4>3、实现功能:</h4>
                    <div>
                        <label for="EfunctionForPC">移动端：</label>
                        <textarea id="EfunctionForPC" class="col-sm-12"rows="6" placeholder="请输入移动端功能"
                            [(ngModel)]="TaskEditModel.FunctionForPC" name="EfunctionForPC"></textarea>
                    </div>
                    <div>
                        <label for="EfunctionForMobile">Web端：</label>
                        <textarea id="EfunctionForMobile" class="col-sm-12" rows="6" placeholder="请输入Web端功能" 
                            [(ngModel)]="TaskEditModel.FunctionForMobile" name="EfunctionForMobile"></textarea>
                    </div>
                    <h4>4、后期任务:</h4>
                    <textarea class="col-sm-12" rows="6" placeholder="请输入后期任务"
                        [(ngModel)]="TaskEditModel.LaterTask" name="ElaterTask"></textarea>
                    <h4>5、最终提交:</h4>
                    <textarea class="col-sm-12" rows="6" placeholder="请输入最终提交"
                        [(ngModel)]="TaskEditModel.LastSumbit" name="ElastSumbit"></textarea>
                </div>
                <div class="tab-pane" id="tab_3">
                    <h3>三、进度安排、应完成的工作量</h3>
                    <h4>1、系统需求分析：</h4>
                    <textarea class="col-sm-12" rows="3" placeholder="请输入系统需求分析与完成时间"
                        [(ngModel)]="TaskEditModel.SystemAnalysis" name="EsystemAnalysis"></textarea>
                    <h4>2、系统设计：</h4>
                    <textarea class="col-sm-12" rows="3" placeholder="请输入系统设计与完成时间"
                        [(ngModel)]="TaskEditModel.SystemDesign" name="EsystemDesign"></textarea>
                    <h4>3、技术准备：</h4>
                    <textarea class="col-sm-12" rows="3" placeholder="请输入技术准备与完成时间"
                        [(ngModel)]="TaskEditModel.SkillReady" name="EskillReady"></textarea>
                    <h4>4、软件设计：</h4>
                    <textarea class="col-sm-12" rows="3" placeholder="请输入软件设计与完成时间"
                        [(ngModel)]="TaskEditModel.SoftwareDesign" name="EsoftwareDesign"></textarea>
                    <h4>5、软件开发编程：</h4>
                    <textarea class="col-sm-12" rows="3" placeholder="请输入软件开发编程与完成时间"
                        [(ngModel)]="TaskEditModel.SoftwareDevelop" name="EsoftwareDevelop"></textarea>
                    <h4>6、软件程序测试：</h4>
                    <textarea class="col-sm-12" rows="3" placeholder="请输入软件程序测试与完成时间"
                        [(ngModel)]="TaskEditModel.SoftwareTest" name="EsoftwareTest"></textarea>
                    <h4>7、毕业论文撰写：</h4>
                    <textarea class="col-sm-12" rows="3" placeholder="请输入毕业论文撰写与完成时间"
                        [(ngModel)]="TaskEditModel.TitleWrite" name="EtitleWrite"></textarea>
                    <h4>8、毕业论文（设计）成品初稿提交：</h4>
                    <textarea class="col-sm-12" rows="3" placeholder="请输入毕业论文（设计）成品初稿提交与完成时间"
                        [(ngModel)]="TaskEditModel.TitleFristSumbit" name="EtitleFristSumbit"></textarea>
                    <h4>9、毕业论文（设计）修改：</h4>
                    <textarea class="col-sm-12" rows="3" placeholder="请输入毕业论文（设计）修改与完成时间"
                        [(ngModel)]="TaskEditModel.TitleEdit" name="EtitleEdit"></textarea>
                    <h4>10、毕业论文（设计）答辩：</h4>
                    <textarea class="col-sm-12" rows="3" placeholder="请输入毕业论文（设计）答辩与完成时间"
                        [(ngModel)]="TaskEditModel.TitleAnswer" name="EtitleAnswer"></textarea>
                    <h4>11、毕业论文（设计）成品终稿提交：</h4>
                    <textarea class="col-sm-12" rows="3" placeholder="请输入论文（设计）成品终稿提交与完成时间"
                        [(ngModel)]="TaskEditModel.TitleLastSumbit" name="EtitleLastSumbit"></textarea>
                </div>
                <div class="tab-pane" id="tab_4">
                    <h3>四、主要参考文献</h3>
                    <textarea [(ngModel)]="TaskEditModel.Reference" name="Ereference" class="col-sm-12" rows="15" placeholder="请输入主要参考文献"></textarea>
                </div>
                <!-- <div class="tab-pane" id="tab_5">
                    <h3>任务进度</h3>
                    <div class="box box-primary">
                        <div class="box-body table-scroll-content">
                            <table class="table table-bordered table-hover table-keep-line">
                                <thead>
                                    <tr>
                                        <th style="width: 10px">#</th>
                                        <th>Task</th>
                                        <th>Progress</th>
                                        <th style="width: 40px">Label</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Update software</td>
                                        <td>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                                            </div>
                                        </td>
                                        <td><span class="badge bg-red">55%</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div> -->
            </div>
            <!-- tab content end -->
        </div>
    </div>
</div>

<!-- Demo模版 -->
<div class="modal fade row" id="DemoModel" tabindex="-1" role="dialog" aria-labelledby="任务书例子">
    <div class="modal-dialog" role="document">
        <div class="modal-content col-sm-12">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">租房销售管理系统</h4>
            </div>
            <div class="modal-body">
                <h3>一、题目来源及原始数据资料</h3>
                <p>
                    随着现代社会的科技发展，网络技术的不断进步，越来越多的商业活动都从传统的现实社会中发展到了网络上。
                房屋的租售业务也从现实生活走上了网络。我国人们生活水平的不断提高和市场经济的快速发展，传统租售服务已经不能满足人们的需求。
                人口的快速增长，人们对房屋需求量大大增加。而且移动设备的快速普及、移动设备方便我们的生活、人们对移动设备的依赖程度越来越大。
                因此需要设计并实现一个界面美观，操作清晰方便，内容完整的移动手机端和基于WEB端提供服务的掌上房屋租售系统。
                这个系统为租房等需求的人群提供在移动端随时搜索查看新房源信息、二手房源信息、出租房源信息，
                客户注册登录、客户资料修改、出售房源、出租房源、收藏房源、评论新房源、查看新房源动态等功能。
                在WEB端为管理员提供员工管理、权限管理等。为员工提供、房源管理、房屋类别管理、客户数据管理、户型管理、状态管理等。
                使用掌上房屋租售系统，不仅能够保证了数据的完整性、保证各项信息快速准确无误输出、从而提高了效率；
                而且提供客户快速找到想要的房源信息，为客户提供便利，节省时间。
                </p>

                <h3>二、毕业设计要求</h3>
                <h4>1、设计内容:</h4>
                <div>1.1 系统数据库结构</div>
                <div>1.2 系统的角色权限分配</div>
                <div>1.3 系统各模块的具体功能</div>
                <div>1.4 系统各功能界面布局</div>
                <div>1.5 系统的处理运作流程</div>
                <div>1.6 系统后台的技术支持</div>

                <h4>2、研究内容:</h4>
                <div>2.1 研究房屋租售的概念</div>
                <div>2.2 对后台所使用的技术支持：PHP和MySQL进行深入研究</div>

                <h4>3、实现功能:</h4>
                <p>移动端:</p>
                <div>3.1 基本功能: 为客户提供登录注册、客户数据修改功能</div>
                <div>3.2 出租出售: 为客户提供出售房源、出租房源、查看出售出租房源信息</div>
                <div>3.3 房源信息: 为客户提供收藏房源、评论新房源、查看新房源动态等功能</div>
                <div>3.4 查看房源: 为客户提供查看新房源信息、二手房源信息、出租房源信息</div>

                <p>WEB端:</p>
                <div>3.5 房源管理: 员工对新房源动态评论等数据、二手房源数据、出租房源数据进行管理等功能</div>
                <div>3.6 客户管理: 员工对客户个人信息、客户出租出售进行管理</div>
                <div>3.7 员工管理: 管理员对员工个人信息进行管理</div>
                <div>3.8 权限管理: 管理员对员工的权限进行管理</div>
                <div>3.9 状态管理: 员工对房源状态进行管理</div>
                <div>3.10 房屋类别管理: 员工对房屋类别进行管理</div>
                <div>3.11 户型管理: 员工对户型进行管理</div>

                <h4>4、后期任务:</h4>
                <div>4.1 利用黑盒测试等技术进行对系统测试，以便更好地维护、改善系统功能</div>
                <div>4.2 使用Rose或其他工具绘制模块的UML用例图，时序图，状态图，协作图以及活动图</div>
                <div>4.3 完成概要设计报告，数据库设计报告，详细设计说明书，用户手册的编写整理工作</div>
                <div>4.4整理资料，根据毕业论文（设计）规范化要求，撰写一篇字数不少于8000字的毕业论文</div>

                <h4>5、最终提交:</h4>
                <div>毕业设计以及毕业论文</div>
        

                <h3>三、进度安排、应完成的工作量</h3>
                <h4>1、系统需求分析：（2016年6月24日~2016年7月5日）</h4>
                <div>搜集房屋租售相关资料，了解房屋租售管理基本概念以及运作流程，分析系统需求</div>

                <h4>2、系统设计：（2016年9月1日~2016年10月15日）</h4>
                <div>根据所分析的系统需求，进行项目设计（数据库的设计，系统各功能模块的设计）</div>

                <h4>3、技术准备：（2016年10月16日~2015年10月20日）</h4>
                <div>复习并熟练掌握PHP、HTML、Android网络与应用编程等技术并作深入研究，为系统开发打下基础。</div>

                <h4>4、软件设计：（2016年10月21日~2016年10月22日）</h4>
                <div>采用移动端和WEB端为移动端提供支持的模式进行软件设计</div>

                <h4>5、软件开发编程：（2016年10月23日~2016年11月20日）</h4>
                <div>根据系统需求分析说明书，编写系统功能模块，完成模块开发</div>

                <h4>6、软件程序测试：（2016年11月21日~2016年12月8日）</h4>
                <div>利用黑盒测试等技术进行系统测试</div>

                <h4>7、毕业论文撰写：（2017年1月20日~2017年2月25日）</h4>
                <div>整理文档数据资料，按照规定格式编写毕业设计（论文）文件</div>

                <h4>8、毕业论文（设计）成品初稿提交：（2017年3月10日前）</h4>
                <div>提交一份毕业论文（设计）成品初稿给指导教师审阅，听取指导教师的修改建议</div>

                <h4>9、毕业论文（设计）修改：（2017年3月11日~2017年3月25日）</h4>
                <div>根据指导教师的修改建议以及自己的见解修改毕业论文（设计）</div>

                <h4>10、毕业论文（设计）答辩：（2017年4月14日~2017年4月23日）</h4>
                <div>准备毕业设计ppt幻灯片演示文档和毕业设计运行演示</div>

                <h4>11、毕业论文（设计）成品终稿提交：（2017年5月1日前）</h4>
                <div>提交一式5份毕业论文（设计）成品打印终稿</div>
        
                <h3>四、主要参考文献</h3>
                <div>[1]张余.Android网络开发从入门到精通[M].北京:清华大学出版社，2014.</div>
                <div>[2]施懿民.Android应用测试与调试实战[M].北京:机械工业出版社，2015.</div>
                <div>[3]明日科技.Android从入门到精通[M].北京: 清华大学出版社，2012.</div>
                <div>[4]唐四新,肖望喜,唐琼.PHP动态网站程序设计[M].北京:人民邮电出版社，2016.</div>
                <div>[5]聂常红.Web前端开发技术[M].北京:人民邮电出版社，2013.</div>
                <div>[6]王长元,赵莉,王淑蓉.软件工程与建模[M].西安:西安交通大学出版社，2010.</div>
                <div>[7]陈志泊.数据库原理及应用教程[M].北京:人民邮电出版社，2014.</div>
                <div>[8]范立锋,于合龙,孙丰伟.HTML5基础开发教程[M].北京:人民邮电出版社，2015.</div>
            </div>
        </div>
    </div>
</div>